Box Sizing and Positioning Summary

Box Sizing

There are four main points that Jessica addressed about box sizing.

1. HTML elements are boxes and each box has 4 components.

2. Because there are so many components to each box, it can often be hard to get the size of a box just right.

3. There are two techniques you can use to help deal with sizing issues:

   • Set sizes in terms of percentages rather than pixels.
   • Set the box-sizing attribute to border-box for every element

4. Different browsers work slightly differently. Sometimes this causes different browsers to display the same code differently.

Box Positioning

1. Divs are block elements (as opposed to inline), so by default they take up the entire width of a page.
2. Adding the rule display: flex; to the appropriate CSS will override this behavior and let divs appear next to each other.